import DataStandard from '@/services/data-factory/index';
import { ProForm, ProFormSelect } from '@ant-design/pro-components';
import { Button, Col, Form, Input, message, Modal, Row } from 'antd';
import React, { PropsWithChildren, useEffect, useState } from 'react';

const { addDataStandardUsingPost, updateDataStandardUsingPost } =
  DataStandard.dataStandardsguanlikongzhiqi;
const { getCodeTableListUsingPost } = DataStandard.codeTableguanlikongzhiqi;
// 数据类型枚举
enum DataType {
  Int = 'Int',
  Float = 'Float',
  Enum = 'Enum',
  String = 'String',
}
interface FieldType {
  chineseName?: string;
  englishName?: string;
  standardDescription?: string;
  sourceOrganization?: string;
  dataType?: DataType;
  valueRangeMin?: number;
  valueRangeMax?: number;
  defaultValue?: string;
  dataAccuracy?: number;
  enumerationRange?: string;
  dataLength?: number;
  whetherEmpty?: number; // 使用数字类型（1/0）
}

interface CreateFormProps {
  modalVisible: boolean;
  onCancel: () => void;
  onSuccess: () => void; // 增加成功回调
  getDataStandardList: () => void; // 增加成功回调
  initialValues?: FieldType; // 添加 initialValues 属性
}

const CreateForm: React.FC<
  PropsWithChildren<CreateFormProps & { standardId?: string }>
> = (props) => {
  const { modalVisible, onCancel, initialValues } = props;
  const [form] = Form.useForm();
  const [dataType, setDataType] = useState<DataType | undefined>(
    initialValues?.dataType || DataType.Int, // 设置默认数据类型为 Int
  );
  const [createModalVisible, handleModalVisible] = useState<boolean>(false);
  const [codeTableOptions, setCodeTableOptions] = useState<any[]>([]); // 存储码表选项
  const onSuccess = () => {
    console.log(createModalVisible);
    handleModalVisible(false);
  };
  // 监听数据类型变化
  const handleDataTypeChange = (value: DataType) => {
    setDataType(value);
    form.resetFields([
      'valueRange',
      'dataLength',
      'defaultValue',
      'dataAccuracy',
      'enumerationRange',
    ]);
  };
  // 枚举范围下拉选择
  // 获取码表列表
  const fetchCodeTableList = async () => {
    const res = await getCodeTableListUsingPost({
      pageSize: 10,
      pageNumber: 1,
      codeTableStatus: 1,
    });
    if (res && res.data && res.data.records) {
      const options = res.data.records.map((record: any) => ({
        value: record.codeTableId,
        label: record.codeTableName,
      }));
      console.log(res);

      setCodeTableOptions(options);
    }
  };
  useEffect(() => {
    fetchCodeTableList();
  }, []);
  // 重置
  const onReset = () => {
    form.resetFields();
    setDataType(DataType.Int); // 重置 dataType 状态为 Int
  };
  // 提交表单 新增，编辑
  const handleSubmit = async () => {
    try {
      if (props.standardId) {
        const values = form.getFieldsValue();
        const res = await updateDataStandardUsingPost({
          standardId: props.standardId,
          ...values, // 将表单值合并到请求体
          whetherEmpty: values.whetherEmpty === '可为空' ? 0 : 1, // 字符串转数字
          enumerationRange:
            dataType === DataType.Enum ? values.enumerationRange : undefined,
          // 将 dataAccuracy 字段的值转换为数字
          dataAccuracy: Number(values.dataAccuracy),
          dataType: DataType[values.dataType], // 将 dataType 字段的值转换为对应的标签
        });
        console.log(res);
        if (res.code === 100200) {
          message.success('编辑成功');
          onCancel();
          onSuccess(); // 调用成功回调
        } else {
          message.error('编辑失败');
          onCancel();
        }
        form.resetFields();
      } else {
        const values = await form.validateFields();
        // 添加 codeTableId 到提交的数据中

        // 调用新增数据的接口
        // 添加 standardId 到提交的数据中
        const dataToSubmit = {
          ...values,
          // 将 dataAccuracy 字段的值转换为数字
          dataAccuracy: Number(values.dataAccuracy),
        };
        // 调用新增数据的接口
        const res = await addDataStandardUsingPost(dataToSubmit);
        console.log(res);

        if (res.code === 100200) {
          message.success('新增成功');
          onCancel();
          onSuccess(); // 调用成功回调
        } else {
          message.error('新增失败');
        }
        form.resetFields(); // 重置表单
      }
      props.getDataStandardList(); // 重新获取数据列表
      // console.log(dataToSubmit);
      form.resetFields(); // 重置表单
      setDataType(DataType.Int); // 重置 dataType 状态为 Int
    } catch (error) {
      console.error('提交失败:', error);
    }
  };
  // 在 useEffect 中显式设置 dataType
  useEffect(() => {
    if (props.standardId === undefined) {
      form.resetFields();
      return;
    }
    if (initialValues) {
      const converted = {
        ...initialValues,
        dataType: initialValues.dataType,
        whetherEmpty: initialValues.whetherEmpty === 1 ? '可为空' : '不可为空',
        enumerationRange: initialValues.enumerationRange,
      };
      // 处理枚举值下拉框的回填
      if (dataType === DataType.Enum && converted.enumerationRange) {
        const matchedOption = codeTableOptions.find(
          (option) => option.value === converted.enumerationRange,
        );
        converted.enumerationRange = matchedOption ? matchedOption.label : '';
      }
      form.setFieldsValue(converted);
      setDataType(converted.dataType); // 关键：显式更新状态
    }
  }, [initialValues, form, props.standardId, codeTableOptions]);

  return (
    <Modal
      destroyOnClose
      // title="新增"
      title={`${props.standardId ? '编辑' : '新增'}`}
      width={600}
      open={modalVisible}
      onCancel={() => onCancel()}
      footer={[
        <Button key="reset" onClick={onReset}>
          重置
        </Button>,
        <Button key="confirm" type="primary" onClick={handleSubmit}>
          确认
        </Button>,
      ]}
      style={{ backgroundColor: 'gray', borderColor: 'red' }}
    >
      {/* {props.children} */}
      <ProForm
        form={form}
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 20 }}
        style={{ maxWidth: 600 }}
        // onFinish={onFinish}
        // onFinishFailed={onFinishFailed}
        autoComplete="off"
        initialValues={{ dataType: 'Int' }} // 设置默认值为 Int
        submitter={false} // 隐藏ProForm的确认重置提交按钮
      >
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item<FieldType>
              label="中文名称"
              name="chineseName"
              rules={[{ required: true, message: '请输入中文名称!' }]}
            >
              <Input placeholder="请选择中文名称" />
            </Form.Item>
            <Form.Item<FieldType>
              label="英文名称"
              name="englishName"
              rules={[{ required: true, message: '请输入英文名称!' }]}
            >
              <Input placeholder="请输入英文名称" />
            </Form.Item>
            <Form.Item<FieldType> label="标准说明" name="standardDescription">
              <Input placeholder="请输入标准说明" />
            </Form.Item>
            <ProFormSelect
              options={[
                {
                  value: '数宜信',
                  label: '数宜信',
                },
              ]}
              width="lg"
              name="sourceOrganization"
              label="来源机构"
              rules={[{ required: true, message: '请选择来源机构' }]}
            />
            <ProFormSelect
              options={[
                {
                  value: 1,
                  label: '可为空',
                },
                {
                  value: 0,
                  label: '不可为空',
                },
              ]}
              width="lg"
              name="whetherEmpty"
              label="是否为空"
              rules={[{ required: true, message: '请选择是否为空' }]}
            />
            <ProFormSelect
              options={[
                {
                  value: 'Int',
                  label: 'Int',
                },
                {
                  value: 'Float',
                  label: 'Float',
                },
                {
                  value: 'Enum',
                  label: 'Enum',
                },
                {
                  value: 'String',
                  label: 'String',
                },
              ]}
              width="lg"
              name="dataType"
              label="数据类型"
              rules={[{ required: true, message: '请选择数据类型' }]}
              fieldProps={{
                onChange: (value) => handleDataTypeChange(value as DataType),
              }}
            />
          </Col>
          <Col span={12}>
            {/* 根据数据类型显示不同的表单项 */}
            {dataType === DataType.Int && (
              <>
                <Form.Item<FieldType> label="取值范围" name="valueRangeMin">
                  <Input
                    placeholder="最小值"
                    width={100}
                    name="valueRangeMin"
                  />
                </Form.Item>
                <Form.Item<FieldType> name="valueRangeMax">
                  <Input
                    placeholder="最大值"
                    width={100}
                    name="valueRangeMax"
                  />
                </Form.Item>
                <Form.Item label="默认值" name="defaultValue">
                  <Input placeholder="请输入默认值" />
                </Form.Item>
              </>
            )}
            {dataType === DataType.Float && (
              <>
                <Form.Item<FieldType> label="数据精度" name="dataAccuracy">
                  <Input
                    type="number"
                    placeholder="请输入标准数据保留小数位数"
                  />
                </Form.Item>
                <Form.Item<FieldType> label="取值范围" name="valueRangeMin">
                  <Input
                    placeholder="最小值"
                    width={100}
                    name="valueRangeMin"
                  />
                </Form.Item>
                <Form.Item<FieldType> name="valueRangeMax">
                  <Input
                    placeholder="最大值"
                    width={100}
                    name="valueRangeMax"
                  />
                </Form.Item>
                <Form.Item label="默认值" name="defaultValue">
                  <Input placeholder="请输入默认值" />
                </Form.Item>
              </>
            )}
            {dataType === DataType.Enum && (
              <>
                <ProFormSelect
                  options={codeTableOptions} // 使用获取的码表选项
                  width="lg"
                  name="enumerationRange"
                  label="枚举值"
                  rules={[{ required: true, message: '请选择枚举值' }]}
                />
                <Form.Item label="默认值" name="defaultValue">
                  <Input placeholder="请输入默认值" />
                </Form.Item>
              </>
            )}
            {dataType === DataType.String && (
              <>
                <Form.Item<FieldType> label="数据长度" name="dataLength">
                  <Input type="number" placeholder="请输入数据最大长度" />
                </Form.Item>
                <Form.Item label="默认值" name="defaultValue">
                  <Input placeholder="请输入默认值" />
                </Form.Item>
              </>
            )}
          </Col>
        </Row>
      </ProForm>
    </Modal>
  );
};

export default CreateForm;
